<script>

export default {
  name: 'CorporationView',
  data() {
    return {
      briefTop: {},
      linkTopPic: {},
      briefCorporationOne: {},
      briefCorporationTwo: {},
      briefCorporationThree: {}
    }
  },

  computed: {
    topPic() {
      return {
        'link': this.linkTopPic.address,
        'imgSrc': 'http://image.fit-start.co/corporate-banner.png'
      }
    },

    corporationBriefOne() {
      return {
       'imgSrc': 'http://image.fit-start.co/corporate-item1.jpg'
      }
    },

    corporationBriefTwo() {
      return {
       'imgSrc': 'http://image.fit-start.co/corporate-item2.jpg'
      }
    },
    
    corporationBriefThree() {
      return {
       'imgSrc': 'http://image.fit-start.co/corporate-item3.png'
      }
    }
  },

  methods: {
    loadPageConfig() {
      this.$store
        .dispatch('FETCH_PAGE_CONFIG', { page: 'corporation' })
        .then(data => {
          this.briefTop = data.brief_top[0]
          this.linkTopPic = data.link_top_pic[0]
          this.briefCorporationOne = data.brief_corporation_1[0]
          this.briefCorporationTwo = data.brief_corporation_2[0]
          this.briefCorporationThree = data.brief_corporation_3[0]
        })
    }
  },

  beforeMount() {
    this.loadPageConfig()
  }
}
</script>

<template>
  <div class="container corporate" style="margin-top: 16px; margin-bottom: 50px; padding: 0px;">
    
    <!-- top banner area -->
    <div class="corporate-banner clearfix">
      <a :href="topPic.link" target="_blank">
        <img class="corporate-banner-img pull-left" :src="topPic.imgSrc" >
      </a>
      <div class="corporate-banner-content">
        <h1 class="title text-center">{{ briefTop.title }}</h1>
        <div class="info">
          <p>{{ briefTop.description }}</p>
        </div>
      </div>
    </div>
    
    <!-- list area -->
    <div class="corporate-list clearfix">
      <ul class="list">
        <li class="item">
          <img class="item-image" :src="corporationBriefOne.imgSrc" >
          <p class="item-content">{{ briefCorporationOne.description }}</p>
        </li>
        <li class="item">
          <img class="item-image" :src="corporationBriefTwo.imgSrc" >
          <p class="item-content">{{ briefCorporationTwo.description }}</p>
        </li>
        <li class="item">
          <img class="item-image" :src="corporationBriefThree.imgSrc" style="height: 244px;">
          <p class="item-content">{{ briefCorporationThree.description }}</p>
        </li>
      </ul>
    </div>

    <div class="more-content">
      
      <div class="chapter">
        <h1 class="title">人马君专业订制，助力企业打造高效团队</h1>
        <p class="subtitle">人马君为企业量身订制，打造团队凝聚力核心课程</p>  
      </div>
      
      <div class="chapter-content clearfix" style="text-align: center;">
        <img src="../../static/images/cohesion_1.jpg" style="margin: 20px 0;">
        <img src="../../static/images/cohesion_2.jpg" style="margin: 20px 0;">
      </div>
      
      <div class="chapter">
        <h1 class="title">小规模团建课（12人以下）</h1>
        <p class="subtitle">teambuilding(Within 12)</p>  
      </div>

      <div class="chapter-content clearfix" style="text-align: center;">
        <img src="../../static/images/team_1.png" style="margin: 20px 0;">
        <img src="../../static/images/team_2.png" style="margin: 20px 0;">
        <img src="../../static/images/team_3.jpg" style="margin: 20px 0;">
      </div>

      <div class="chapter">
        <h1 class="title">白领午休团课精选</h1>
        <p class="subtitle">FOR White collars</p>  
      </div>

      <div class="chapter-content clearfix" style="text-align: center;">
        <img src="../../static/images/white_1.png" style="margin: 20px 0;">
        <img src="../../static/images/white_2.png" style="margin: 20px 0;">
        <img src="../../static/images/white_3.jpg" style="margin: 20px 0;">
      </div>

      <div class="chapter">
        <h1 class="title">私教讲座课</h1>
        <p class="subtitle">Personal training lecture courses</p>  
      </div>

      <div class="chapter-content clearfix" style="text-align: center;">
        <img src="../../static/images/personal_training_1.png" style="margin: 20px 0;">
        <img src="../../static/images/personal_training_2.jpg" style="margin: 20px 0;">
      </div>
      
      <div class="chapter">
        <h1 class="title">大规模团建课</h1>
        <p class="subtitle">TEAMbuilding</p>  
      </div>

      <div class="chapter-content clearfix" style="text-align: center;">
        <img src="../../static/images/team_1.png" style="margin: 20px 0;">
        <img src="../../static/images/team_2.png" style="margin: 20px 0;">
        <img src="../../static/images/team_3.jpg" style="margin: 20px 0;">
      </div>

      <div class="chapter">
        <h1 class="title">自定义企业健身福利包</h1>
        <p class="subtitle">fitness benefits package</p>  
      </div>

      <div class="chapter-content passionate clearfix">
          <img src="../../static/images/benifits_package.png" style="padding: 0 35px;">
          <div class="right">
            <p>此外，人马君也可以根据企业规模及特定需求，协助制定企业全套健身福利方案，利用上门、到店及户外等不同形式，帮助企业员工养成团结拼搏的向上心态、健康的体魄，从而大幅提高员工劳动生产率，提升企业效率</p>
          </div>
      </div>
        
    </div>

    <div class="phone">
      <img src="../../static/images/corporations_phone.jpg">
    </div>
    
  </div>
</template>

<style>
@import '../../static/styles/corporation.css'
</style>